<template>
    <div class="everyDay_data">
        <!-- <el-row> -->
            <!-- <el-col :span="8">
                <div class="block">
                    <span class="demonstration">时间</span>
                    <el-date-picker
                        v-model="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <span class="demonstration">所属门店</span>
                    <el-select v-model="storeName" filterable placeholder="请选择" clearable>
                        <el-option
                            v-for="item in storeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            unlink-panels
                        ></el-option>
                    </el-select>
                </div>
            </el-col> -->
                      <!-- <companyStore  v-if="!this.$store.state.login.userInfo.storeId" :size="[6,6,6]" @cs="cs" ref="rest"/>
            <el-col :span="6">
                <div class="button-row" v-if="!this.$store.state.login.userInfo.storeId">
                    <el-button size="medium" icon="el-icon-search" type="success" :loading="loading1" @click="query">查询</el-button>
                    <el-button size="medium" type="primary" icon="el-icon-refresh" :loading="loading2" @click="reset">重置</el-button>
                </div>
            </el-col>
        </el-row> -->
        <h3>数据分析看板</h3>
        <el-row>
            <!-- <el-col :span="8">
                <div class="block">
                    <span class="demonstration">时间</span>
                    <el-date-picker
                        v-model="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <span class="demonstration">所属门店</span>
                    <el-select v-model="storeName" filterable placeholder="请选择" clearable>
                        <el-option
                            v-for="item in storeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            unlink-panels
                        ></el-option>
                    </el-select>
                </div>
            </el-col> -->
                      <companyStore  v-if="!this.$store.state.login.userInfo.storeId" :size="[6,6,6]" @cs="cs" ref="rest"/>
            <el-col :span="6">
                <div class="button-row" v-if="!this.$store.state.login.userInfo.storeId">
                    <el-button size="medium" icon="el-icon-search" type="success" :loading="loading1" @click="query">查询</el-button>
                    <el-button size="medium" type="primary" icon="el-icon-refresh" :loading="loading2" @click="reset">重置</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top:30px">
            <el-col :span="12">
                <ech1 :lineData="lineData"/>
            </el-col>
            <el-col :span="12">
                <ech5 :lineData5="lineData5"/>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top:15px">
            <el-col :span="12">
                <ech6 :lineData="lineData"/>
            </el-col>
            <el-col :span="12">
                <ech7 :lineData="lineData"/>
            </el-col>
        </el-row>
    </div>
</template>
<script>
// import ech3 from "./echarts/ech_3";
// import ech4 from "./echarts/ech_4";
import ech1 from "./echarts/ech_1";
import ech5 from "./echarts/ech_5";
import ech6 from "./echarts/ech_6";
import ech7 from "./echarts/ech_7";
import { statisticsLineData, statisticsBarData,getStoreList,homeLineData } from "@/config/interface";
import companyStore from "@/common/group_a_store.vue"
export default {
  components: {
    ech1,
    ech5,
    ech6,
    ech7,
    companyStore
  },
  data() {
    return {
      date: "",
      storeName: "",
      storeList: [],
      da24: {},
      dazh: {},
      lineData:{},
      lineData5:{},
      companyId:"",
      areaId:"",
      storeId:"",
      loading1:false,
      loading2:false
    };
  },
  methods: {
    cs(e){
      this.storeId = e[1]
      this.companyId=e[0]
      this.areaId=e[2]
    },
    reset() {
      this.loading2=true
      if(!this.$store.state.login.userInfo.storeId){
         this.$refs.rest.setgroup()
      }
        this.storeName = ""
        this.storeId=""
        this.companyId=""
        this.date = ""
        this.homeLineData()
        // this.statisticsBarData()
    },
    query() {
      this.loading1=true
        // this.statisticsData(this.storeName,this.date)
       this.homeLineData(this.storeId,this.companyId,this.areaId)
    },
    //之前代码
    statisticsData(storeId,date) {
      statisticsLineData({storeId,date}).then(res => {
        this.da24 = res.data.result;
      });
    },
    homeLineData(storeId,companyId,areaId) {
      homeLineData({storeId,companyId,areaId}).then(res => {
        this.lineData = res.data.result;
        this.lineData5=Object.assign({}, res.data.result);
        this.loading1=false
        this.loading2=false
        // this.lineData6=res.data.result
        // this.lineData7=res.data.result
      });
    },
    // statisticsBarData(storeId,date) {
    //   statisticsBarData({storeId,date}).then(res => {
    //     console.log(res.data.result, "住");
    //     this.dazh = res.data.result;
    //   });
    // },
    getStoreList(){
      getStoreList().then(res=>{
        this.storeList = res.data.result
      })
    }
  },
  mounted(){
    // this.statisticsData()
    // this.statisticsBarData()
    this.getStoreList()
    this.homeLineData()
  }
};
</script>
<style lang="scss" scoped>
.button-row {
  display: flex;
  justify-content: flex-end;
}
.everyDay_data {
  margin-top: 30px;
  h3 {
    margin: 0;
    color: #555;
    font-size: 26px;
    font-weight: 800;
    line-height: 50px;
    margin-bottom: 30px;
    &:after {
      content: "";
      display: block;
      width: 12px;
      height: 50px;
       background: #4DA0FF;
       border-radius:10px;
      float: left;
      margin-right: 25px;
    }
  }
}
</style>